import React, {useState, useEffect} from 'react';
import {StyleSheet, Text, View, SafeAreaView, Pressable} from 'react-native';
import MaterialCommunityIcons from 'react-native-vector-icons/MaterialCommunityIcons';
import {orderIndex} from '../../api/index.js';
const BettingRecord = ({navigation}) => {
  const [tableList, setTableList] = useState([]);

  const getData = async function () {
    const res = await orderIndex({
      symbol: 'BTC',
      status: 0,
    });
    console.log(res);
    if (res.code === 1000) {
      setTableList(
        res.data.order.map(ele => {
          ele.goods_price = parseFloat(ele.goods_price).toFixed(2);
          return ele;
        }),
      );
    }
  };
  useEffect(() => {
    getData();
  }, []);

  return (
    <SafeAreaView>
      <View style={styles.container}>
        <View style={styles.nav}>
          <View style={styles.navItem}>
            <Text style={styles.navActive}>進行中</Text>
          </View>
          <View style={styles.navItem}>
            <Text style={styles.navNormal}>已完成</Text>
          </View>
        </View>
        <View style={styles.financeTitleContainer}>
          <View style={styles.financeTitleContainerItem}>
            <Text style={styles.financeTitleContainerItemText}>名稱</Text>
          </View>
          <View style={styles.financeTitleContainerItem}>
            <Text style={styles.financeTitleContainerItemText}>價格</Text>
          </View>
          <View style={styles.financeTitleContainerItem}>
            <Text style={styles.financeTitleContainerItemText}>漲跌</Text>
          </View>
          <View style={styles.financeTitleContainerItem}>
            <Text style={styles.financeTitleContainerItemText}>漲幅</Text>
          </View>
          <View style={styles.financeTitleContainerItem}>
            <Text style={styles.financeTitleContainerItemText}> </Text>
          </View>
        </View>
        {tableList.map(item => {
          return (
            <Pressable
              style={styles.financeRowContainer}
              onPress={() => navigation.navigate('BetScreen')}>
              <View style={styles.financeRowContainerItem}>
                <Text style={styles.financeRowContainerItemText}>Bitcoin</Text>
              </View>
              <View style={styles.financeRowContainerItem}>
                <Text style={styles.financeRowContainerItemText}>
                  {item.goods_price}
                </Text>
              </View>
              <View style={styles.financeRowContainerItem}>
                {item.type === 2 ? (
                  <Text style={styles.financeRowContainerItemText3}>
                    看空 {item.section}
                  </Text>
                ) : (
                  <Text style={styles.financeRowContainerItemText2}>
                    看多 {item.section}
                  </Text>
                )}
              </View>
              <View style={styles.financeRowContainerItem}>
                <Text style={styles.financeRowContainerItemText3}>
                  ▼(0.60%)
                </Text>
              </View>
              <View style={styles.financeRowContainerItem}>
                <MaterialCommunityIcons
                  name="content-copy"
                  color="#000"
                  size={24}
                />
              </View>
            </Pressable>
          );
        })}
      </View>
    </SafeAreaView>
  );
};

const styles = StyleSheet.create({
  container: {},
  nav: {
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'row',
    marginTop: 4,
    height: 30,
  },
  navItem: {
    paddingLeft: 10,
    paddingRight: 10,
  },
  navActive: {
    color: '#169BD5',
    fontSize: 14,
    fontWeight: 'bold',
  },
  navNormal: {
    color: '#999999',
    fontSize: 14,
    fontWeight: 'bold',
  },
  financeTitleContainer: {
    display: 'flex',
    flexDirection: 'row',
    backgroundColor: '#F2F2F2',
    height: 30,
    marginTop: 4,
    borderBottomColor: '#797979',
    borderBottomWidth: 1,
  },
  financeTitleContainerItem: {
    paddingLeft: 5,
    paddingRight: 5,
    flexGrow: 1,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'row',
  },
  financeTitleContainerItemText: {
    color: '#666',
    fontSize: 16,
    fontWeight: 'bold',
  },

  financeRowContainer: {
    display: 'flex',
    flexDirection: 'row',
    height: 56,
    borderBottomColor: '#797979',
    borderBottomWidth: 1,
    borderRightColor: '#797979',
    borderRightWidth: 1,
    borderLeftColor: '#797979',
    borderLeftWidth: 1,
  },
  financeRowContainerItem: {
    paddingLeft: 5,
    paddingRight: 5,
    flexGrow: 1,
    display: 'flex',
    alignItems: 'center',
    justifyContent: 'center',
    flexDirection: 'row',
  },
  financeRowContainerItemText: {
    color: '#666',
    fontSize: 16,
    fontWeight: 'bold',
  },
  financeRowContainerItemText2: {
    color: '#009900',
    fontSize: 16,
    fontWeight: 'bold',
  },
  financeRowContainerItemText3: {
    color: '#FF0052',
    fontSize: 16,
    fontWeight: 'bold',
  },
});

export default BettingRecord;
